<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>bmap-wind</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.css">
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=bxFuXXDt1oKdlgu6mXCCnK51cDgDGBLp"></script>
  <style type="text/css">
    body, html,#container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin:0;
    }
  </style>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
<script src="../packages/bmap/dist/bmap-wind.js"></script>
<script type="text/javascript">
  var map = new BMap.Map("container");
  map.centerAndZoom(new BMap.Point(116.3964,39.9093), 2);
  map.enableScrollWheelZoom();
  // 地图自定义样式
  map.setMapStyle({
    styleJson: [{
      "featureType": "water",
      "elementType": "all",
      "stylers": {
        "color": "#044161"
      }
    }, {
      "featureType": "land",
      "elementType": "all",
      "stylers": {
        "color": "#091934"
      }
    }, {
      "featureType": "boundary",
      "elementType": "geometry",
      "stylers": {
        "color": "#064f85"
      }
    }, {
      "featureType": "railway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "highway",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981"
      }
    }, {
      "featureType": "highway",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#005b96",
        "lightness": 1
      }
    }, {
      "featureType": "highway",
      "elementType": "labels",
      "stylers": {
        "visibility": "on"
      }
    }, {
      "featureType": "arterial",
      "elementType": "geometry",
      "stylers": {
        "color": "#004981",
        "lightness": -39
      }
    }, {
      "featureType": "arterial",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#00508b"
      }
    }, {
      "featureType": "poi",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "green",
      "elementType": "all",
      "stylers": {
        "color": "#056197",
        "visibility": "off"
      }
    }, {
      "featureType": "subway",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "manmade",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "local",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "arterial",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "boundary",
      "elementType": "geometry.fill",
      "stylers": {
        "color": "#029fd4"
      }
    }, {
      "featureType": "building",
      "elementType": "all",
      "stylers": {
        "color": "#1a5787"
      }
    }, {
      "featureType": "label",
      "elementType": "all",
      "stylers": {
        "visibility": "off"
      }
    }, {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": {
        "color": "#ffffff"
      }
    }, {
      "featureType": "poi",
      "elementType": "labels.text.stroke",
      "stylers": {
        "color": "#1e1c1c"
      }
    }, {
      "featureType": "administrative",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    },{
      "featureType": "road",
      "elementType": "labels",
      "stylers": {
        "visibility": "off"
      }
    }]
  });

  fetch('https://sakitam-fdd.github.io/wind-layer/data/wind.json')
    .then(res => res.json())
    .then(res => {
      var layer = new BMapWind.WindLayer(res, {
        windOptions: {
          // colorScale: (m) => {
          //   // console.log(m);
          //   return '#fff';
          // },
          colorScale: [
            "rgb(36,104, 180)",
            "rgb(60,157, 194)",
            "rgb(128,205,193 )",
            "rgb(151,218,168 )",
            "rgb(198,231,181)",
            "rgb(238,247,217)",
            "rgb(255,238,159)",
            "rgb(252,217,125)",
            "rgb(255,182,100)",
            "rgb(252,150,75)",
            "rgb(250,112,52)",
            "rgb(245,64,32)",
            "rgb(237,45,28)",
            "rgb(220,24,32)",
            "rgb(180,0,35)"
          ],
          // velocityScale: 1 / 20,
          // paths: 5000,
          frameRate: 16,
          maxAge: 60,
          globalAlpha: 0.9,
          velocityScale: 1 / 30,
          paths: 2000,
          // paths: () => { // can be number or function
          //   const zoom = map.getZoom();
          //   return zoom * 1000;
          // },
        },
      });

      map.addOverlay(layer);
    });
</script>
</body>
</html>
